<template>
    <div id="search-music">

    </div>
    <NModal v-model:show="visible" to="#search-music" class="w-80.6rem bg-red" preset="card" auto-focus
        :mask-closable="true" style="position: fixed; top: 100px; left:0;right:0;margin:auto">
        <div class="w-80.6rem   search  top-5.5rem left-5.5rem z-10000 ">
            <div class="flex items-center  px-3.5rem py-2.2rem">
                <SvgIcon class="w-2.6rem h-3rem" local-icon="search" />
                <input type="text"
                    class="ml-1.6rem bg-transparent text-2.2rem text-white border-none focus:border-none focus:outline-none"
                    placeholder="请输入歌手名或歌曲名" @focus="focusInput" @input="search" v-model="searchKeyword" />
            </div>
            <div class="w-full h-0.2rem bg-op2 " v-if="musicList.length > 0"></div>
            <div class="px-3.5rem ">
                <template v-for="(item, index) in musicList">
                    <div class="flex py-0.3rem items-center text-white py-0.5rem cursor-pointer"
                        @click="playMusic(item.id, index, item.name)">
                        <img class="w-6.4rem h-6.4rem text-white cursor-pointer" :src="item.img">
                        <div class="flex flex-col justify-between ml-1rem">
                            <div class="text-2.2rem text-white ">{{ item.name }}</div>
                            <div class="text-1.8rem text-#FFFFFF99 ">{{ item.auther }}</div>
                        </div>
                    </div>
                    <div class="w-full h-0.1rem bg-op2 " v-if="index !== musicList.length - 1"></div>
                </template>
            </div>
        </div>
    </NModal>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { emitter } from '@/utils/mitt';
import { musicMap } from '../../player/music'
import { MusicWidget, eventMusic, MusicAction } from "@/hooks/business/eventListen/musicEventListen";
import { throttle } from "@/utils/common";
defineOptions({ name: 'ZModal' });

const visible = defineModel<boolean>('show', { required: true });
const searchKeyword = ref('')
let oldValue = '';
const musicList: any = ref([])

function _search() {
    const val = searchKeyword.value.trim();
    if (val === oldValue) {
        return;
    }
    oldValue = val;
    eventMusic(MusicAction.Input, MusicWidget.SearchInput, `${MusicWidget.SearchInput}_input`, MusicWidget.SearchInput, val);
    if (val !== '') {
        musicList.value = musicMap.filter((item: any) => item.auther.includes(val) || item.name.includes(val))
    } else {
        musicList.value = [];
    }
}

// 包装为节流后的函数，300ms 可根据需要调整
const search = throttle(_search, 1000);


function playMusic(id: number, index: number, name: string) {
    eventMusic(MusicAction.Click, MusicWidget.SearchSuggestion, `${MusicWidget.SearchSuggestion}${index}`, `${MusicWidget.SearchSuggestion}${index}`, name);
    visible.value = false;
    emitter.emit("playMusic", { id })
}

// 聚焦输入框时，清空搜索建议
function focusInput() {
    eventMusic(MusicAction.Click, MusicWidget.SearchInput, `${MusicWidget.SearchInput}_focus`, MusicWidget.SearchInput);
}
</script>
<style scoped lang="scss">
:deep(.n-modal) {
    background: transparent !important;
    box-shadow: none !important;
    // top: -35rem
}

:deep(.n-card-header) {
    display: none !important;
}

.search {
    border-radius: 10px;
    background: rgba(78, 84, 141, 0.26);
    border: 1px solid undefined;
    backdrop-filter: blur(22px);
}

.bg-op2 {
    background: rgba(255, 255, 255, 0.2);
}
</style>